<template>
    
    <!--    配置国际化-->
    <el-config-provider :locale="elConfig.locale" :z-index="elConfig.zIndex">
        <router-view v-if="isRouterAlive"></router-view>
    </el-config-provider>
</template>


<script setup lang="ts">
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import useAppStore from "@/base/stores/modules/app";
import useSettingStore from "@/base/stores/modules/setting";
import {useDark, useThrottleFn, useWindowSize} from '@vueuse/core'
import {ScreenEnum} from "@/config/enums/appEnums";

const elConfig = {
    zIndex: 3000,
    locale: zhCn
}


// 使用暗黑风格
const isDark = useDark()
const appStore = useAppStore()
const settingStore = useSettingStore()


/**
 * 页面刷新加载
 */
onMounted(async () => {
    //设置主题色
    settingStore.setTheme(isDark.value)
    
    // 获取配置
    const data: any = await appStore.getConfig()
    
    // 设置网站logo
    let favicon: HTMLLinkElement = document.querySelector('link[rel="icon"]')!
    if (favicon) {
        favicon.href = data.webFavicon
        return
    }
    
    favicon = document.createElement('link')
    favicon.rel = 'icon'
    favicon.href = data.web_favicon
    document.head.appendChild(favicon)
})

const {width} = useWindowSize()


/**
 * 监控节流阀 todo // 后面学习一下userThrottle 截流法 和 抖动
 */
watch(
    width,
    useThrottleFn((value) => {
        
        if (value > ScreenEnum.SM) {
            appStore.setMobile(false)
            appStore.toggleCollapsed(false)
        } else {
            appStore.setMobile(true)
            appStore.toggleCollapsed(true)
        }
        if (value < ScreenEnum.MD) {
            appStore.toggleCollapsed(true)
        }
    }),
    {
        immediate: true
    }
)


const isRouterAlive = ref(true)

/**
 * 刷新当前页面
 */
function reload(): void {
    isRouterAlive.value = false
    nextTick(() => {
        isRouterAlive.value = true
    })
}


provide('reload', reload);


</script>
